<template>
  <div class="box app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding:'0',height:'400px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                  成功提示
                </span>
            </div>
            <div>
              <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
                <template slot="extra">
                  <el-button type="primary" size="medium">确认</el-button>
                </template>
              </el-result>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding:'0',height:'400px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   警告提示
                </span>
            </div>
            <div>
              <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
                <template slot="extra">
                  <el-button type="primary" size="medium">确认</el-button>
                </template>
              </el-result>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding:'0',height:'400px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   错误提示
                </span>
            </div>
            <div>
              <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
                <template slot="extra">
                  <el-button type="primary" size="medium">确认</el-button>
                </template>
              </el-result>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding:'0',height:'400px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   信息提示
                </span>
            </div>
            <div>
              <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
                <template slot="extra">
                  <el-button type="primary" size="medium">确认</el-button>
                </template>
              </el-result>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding:'0',height:'340px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   Alert 警告
                </span>
            </div>
            <div style="padding: 0 20px">
              <el-alert
                title="成功提示的文案"
                type="success"
                show-icon>
              </el-alert>
              <el-alert
                title="消息提示的文案"
                type="info"
                show-icon>
              </el-alert>
              <el-alert
                title="警告提示的文案"
                type="warning"
                show-icon>
              </el-alert>
              <el-alert
                title="错误提示的文案"
                type="error"
                show-icon>
              </el-alert>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card shadow="hover" :body-style="{padding:'0',height:'160px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   Message 消息提示
                </span>
            </div>
            <div style="padding:20px" class="flex">
              <el-button type="primary" size="medium" @click="open2">成功</el-button>
              <el-button type="success" size="medium" @click="open3">警告</el-button>
              <el-button type="warning" size="medium" @click="open1">消息</el-button>
              <el-button type="danger" size="medium" @click="open4">错误</el-button>
            </div>
          </div>
        </el-card>
        <el-card shadow="hover" :body-style="{padding:'0',height:'160px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   Message 消息提示
                </span>
            </div>
            <div style="padding:20px" class="flex">
              <el-button type="primary" size="medium" @click="open2">成功</el-button>
              <el-button type="success" size="medium" @click="open3">警告</el-button>
              <el-button type="warning" size="medium" @click="open1">消息</el-button>
              <el-button type="danger" size="medium" @click="open4">错误</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card shadow="hover" :body-style="{padding:'0',height:'160px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   Notification 消息提示
                </span>
            </div>
            <div style="padding: 20px"  class="flex">
              <el-button type="primary" size="medium" @click="open5">成功</el-button>
              <el-button type="success" size="medium" @click="open6">警告</el-button>
              <el-button type="warning" size="medium" @click="open7">消息</el-button>
              <el-button type="danger" size="medium" @click="open8">错误</el-button>
            </div>
          </div>
        </el-card>
        <el-card shadow="hover" :body-style="{padding:'0',height:'160px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   Message Box消息提示
                </span>
            </div>
            <div style="padding:20px" class="flex">
              <el-button type="primary" size="medium" @click="open9">消息提示</el-button>
              <el-button type="primary" size="medium" @click="open10">确认消息</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'notice',
  methods: {
    open1() {
      this.$message('这是一条消息提示');
    },
    open2() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },

    open3() {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      });
    },

    open4() {
      this.$message.error('错了哦，这是一条错误消息');
    },
    open5() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },

    open6() {
      this.$notify({
        title: '警告',
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },

    open7() {
      this.$notify.info({
        title: '消息',
        message: '这是一条消息的提示消息'
      });
    },

    open8() {
      this.$notify.error({
        title: '错误',
        message: '这是一条错误的提示消息'
      });
  },
  open9(){
    this.$alert('这是一段内容', '标题名称', {
      confirmButtonText: '确定',
      callback: action => {
        this.$message({
          type: 'info',
          message: `action: ${ action }`
        });
      }
    });
  },
    open10(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  padding-bottom: 50px;
  .el-col {
    margin-bottom: 20px;
    .el-alert{
      margin: 20px 0;
    }
    .el-card{
      margin-bottom: 20px;
    }
    .head-chart {
      display: flex;
      padding: 20px 20px 20px 20px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E4E7ED;

      .icon-chart {
        font-size: 14px;

        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
